<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>内容管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>
    <style>
        body,
        html {
            height: 100%;
            box-sizing: border-box;
        }

        iframe {
            border: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

        }

        #Left {
            width: 240px;
            position: fixed;
            left: 0;
            top: 55px;
            bottom: 0;
            background: #fff;
            border-right: 1px solid #ccc;
            box-shadow: #ccc 0 2px 4px;
            overflow: hidden;
            overflow-y: auto;
        }

        #MainRight {
            margin-left: 240px;
            height: 100%;
            overflow: hidden;
        }

        .nodeover .layui-tree-iconClick,
        .nodeover .layui-tree-txt {
            color: #009688;
            font-weight: bold;
        }

        .layui-icon-fd {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            background: url(../../images/fort.png) no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="layui-card-header layui-form layui-row layuiadmin-card-header-auto" id="selectWebsite"
        style="padding: 5px 0 15px 25px; position: absolute ">
        <div class="layui-col-xs3">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline" id="websitediv">
                    </div>
                    <script type="text/html" id="websitetemp">
                        <select name="Website" id="Website" lay-filter="Website" class="layui-form-select" lay-search>

                                    {{# layui.each(d.data, function (index, item) { }}
                                    <option value="{{item.WebsiteId }}">{{item.Title }}</option>
                                    {{# })  }}
                                </select>
                    </script>
                </div>
            </div>
        </div>

    </div>
    <div id="Left">

    </div>

    <div id="MainRight">
        <iframe name="MainRight">

        </iframe>
    </div>

    <script type="text/javascript">
        lobsterlayui.main(['index', 'layer', 'form', 'element', 'tree'],{
            data: {
                $layui: null,
                nodeList: [],
                treeData: [],
                websiteList: [],
                websiteId: 0,//站点ID
            },
            pageload: function (right) {
                 var self = this;

                self.initEvent();
                self.basicbusload(function () {
                    self.data.websiteId = $("#Website").val();
                    window.currWebSite = $("#Website").val();
                    self.loadAllNode();
                });
                self.pageEvent();
            },

            initEvent: function () {
                    document.addEventListener("visibilitychange", function () {
                        console.log(document.visibilityState);
                    });

                },
                //站点列表
                basicbusload: function (callback) {
                    var self = this;
                    lobsterlayui.GETAPI('tsAdmin.getwebsitelist').then(retdata=>{
                        self.data.websiteList = retdata["list"];
                        var websiteTpl = websitetemp.innerHTML, websiteView = document.getElementById('websitediv');
                        layui.laytpl(websiteTpl).render({ data: self.data.websiteList }, function (html) {
                            websiteView.innerHTML = html;
                        });
                        layui.form.render();
                        if (callback) {
                            callback();
                        }
                    })

                },
                //加载内容
                loadAllNode: function () {
                    //获取数据
                    var self = this;
                    lobsterlayui.GETAPI('tsAdmin.getnodelist',{ websiteId: self.data.websiteId }).then(retdata=>{
                        self.data.nodeList = retdata["data"];
                        self.initData();
                    })
                },
                //重新组装成tree数据
                initData: function () {
                    var self = this;
                    var title = '';
                    for (var i = 0; i < self.data.websiteList.length; i++) {
                        if (self.data.websiteList[i].WebsiteId == self.data.websiteId) {
                            title = self.data.websiteList[i].Title;
                            window.currWorkId = self.data.websiteList[i].WorkId;
                        }

                    }
                    var root = {
                        id: 0,
                        type: 0,
                        title: title,
                        children: [],
                        spread: true,
                    };

                    var list = self.data.nodeList;//.filter(item => item.NodeType != 5);
                    var currAdd = function (node, li) {
                        var newnode = { id: node.NID, title: node.NodeName, children: [], spread: true, selected: false, href: "" }
                        // if (node.NodeType == 1) {
                        //     newnode.href = "contList.html?nid=" + node.NID + "&" + "isfollow=" + (self.data.followsiteid <= 0 ? '0' : '1');
                        // } else if (node.NodeType == 2) {
                        //     newnode.href = "nodeCont.html?nid=" + node.NID;
                        // } else if (node.NodeType == 3 || node.NodeType == 4) {
                        //     newnode.href = "javascript:void(0);";
                        // }
                        // if (node.ParentID > 0) {
                            newnode.href = "list.html?nid=" + node.NID+"&appid="+lobsterlayui.GetAppId();
                        // } else {
                            // newnode.href = "javascript:void(0);";
                        // }
                        li.children.push(newnode)
                        var filList = list.filter(item => item.ParentID == node.NID);
                        if (filList && filList.length > 0) {
                            filList.forEach(item => {
                                currAdd(item, newnode);
                            })
                        }
                    }
                    list.forEach(item => {
                        if (item.ParentID == -1) {
                            currAdd(item, root);
                        }
                    });
                    this.data.treeData = [root];
                    this.viewToTree();
                },
                viewToTree: function () {
                    //渲染
                    var inst1 = layui.tree.render({

                        elem: '#Left',  //绑定元素
                        isJump: true,
                        onlyIconControl: true,
                        data: this.data.treeData,
                        click: obj => {
                            // if (obj.data.type == 0) {
                            //     return;
                            // }
                            // if (obj.data.type == 3 || obj.data.type == 4) {
                            //     layui.layer.msg('此节点无需内容维护');
                            // } else {
                            $("#Left .nodeover").removeClass("nodeover");
                            $(obj.elem).find(".layui-tree-main").eq(0).addClass("nodeover");
                            // }
                        }

                    });
                    $("#Left a").attr("target", "MainRight");
                },
                pageEvent: function () {
                    var self = this;
                    //搜索条件
                    layui.form.on('select(Website)', function (data) {
                        self.data.websiteId = $("#Website").val();
                        window.currWebSite = $("#Website").val()
                        self.loadAllNode();
                    });
                },

        })
    </script>
</body>

</html>